<template>
  <div class="gjDetail">
    <div class="gj_add">
      <el-input placeholder="单号" v-model="receiptsNumber" clearable style="margin-left:10px"></el-input>
      <el-autocomplete clearable v-model="accountBook" placeholder="账本" :fetch-suggestions="queryAccountList" @keyup.enter.native="inputEnter($event)"></el-autocomplete>
      <el-date-picker v-model="date" type="date" placeholder="日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <el-select v-model="subject" placeholder="科目">
        <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input v-model="subjectInfo" placeholder="科目明细"></el-input>
      <el-input placeholder="借方(收入)" v-model="debtor" clearable style="width: 6vw;" @blur="checkType(debtor, 'debtor')"></el-input>
      <el-input placeholder="贷方(支出)" v-model="creditor" style="width: 6vw;" clearable @blur="checkType(creditor, 'creditor')"></el-input>
      <el-input placeholder="摘要" v-model="summary" clearable style="width: 20vw;" @keyup.enter.native="saveNewAccount"></el-input>
      <el-button type="primary" @click="saveNewAccount">添加</el-button>
      <el-button type="primary" @click="modification" plain :disabled="!isToday">修改</el-button>
      <el-button @click="showUpload">上传图片</el-button></div>
    <el-table id="outTable" :data="gjData" style="width: 100%" height="68vh" highlight-current-row @row-click="rowClick" ref="tableList" :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" :cell-style="{padding:0,height:'36px'}">
      <el-table-column prop="date" label="日期" sortable width="100"></el-table-column>
      <el-table-column prop="receiptsNumber" label="单号" sortable width="180"></el-table-column>
      <el-table-column prop="subject" label="科目" sortable width="160"></el-table-column>
      <el-table-column prop="accountBook" label="账本" sortable width="160"></el-table-column>
      <el-table-column prop="subjectInfo" label="科目明细" sortable width="160"></el-table-column>
      <el-table-column prop="debtor" label="借方(收入)" sortable width="160"></el-table-column>
      <el-table-column prop="creditor" label="贷方(支出)" sortable width="160"></el-table-column>
      <el-table-column prop="balance" label="余额" sortable width="180"></el-table-column>
      <el-table-column prop="summary" label="摘要" sortable show-overflow-tooltip></el-table-column>
      <el-table-column label="图片" width="100">
        <template slot-scope="scope">
          <p style="color: #017aff;" @click="check(scope.row)">查看大图</p>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="checkImg" id="imgBox">
      <div class="imgTop" id="imgBoxTop">
        <span style="line-height:30px;font-weight:bold;">显示图片</span>
        <i class="el-icon-close" @click="()=>{this.checkImg=false}"></i>
      </div>
      <img v-for="(url,i) in srcList" :key="url" :src="url" style="width: 200px; height: 200px;" @click="enlargement(i)"></div>
    <div v-show="largeImg" id="large">
      <img :src="imgurl">
      <div>
        <span class="el-icon-arrow-left" @click="previousImg"></span>
        <span class="el-icon-arrow-right" @click="nextImg"></span>
        <span class="el-icon-close" @click="()=>{this.largeImg = false}"></span>
      </div>
    </div>
    <div class="mask" :style="{display: uploadImg}"></div>
    <div class="upload" :style="{display:uploadImg}">
      <div class="ui-top">
        <p>上传图片</p>
        <i class="el-icon-close" @click="cancelUpload"></i>
      </div>
      <div class="ui-content">
        <div class="imgItem" v-for="(item, i) in srcList" :key="item">
          <div class="imgMask" v-if="imgItemIndex == i" @mouseout="()=>{imgItemIndex = -1}">
            <i class="el-icon-delete" @click="imgItemClick(i)"></i>
          </div>
          <img :src="item" class="uploadImg" @mouseenter="()=>{imgItemIndex = i}">
        </div>
        <div class="imgItem" v-for="(item, i) in imgList" :key="item">
          <div class="imgMask" v-if="imgItemIndex1 == i" @mouseout="()=>{imgItemIndex1 = -1}">
            <i class="el-icon-delete" @click="handleRemove(i)"></i>
          </div>
          <img :src="item" class="uploadImg" @mouseenter="()=>{imgItemIndex1 = i}">
        </div>
        <div class="up"> 
          <p>上传图片</p>
          <input type="file" accept="image/*" @change="upLoad" id="file">
        </div>
      </div>
      <div class="operation">
        <el-button @click="cancelUpload">取消</el-button>
        <el-button type="primary" @click="submitUpload">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAccount, addAccount, updateAccount} from '../../../../network/currentAccount'
import { getSubject} from '../../../../network/subject'
import { addImage ,getImage, deleteImage, changeImage, currentAccountDoUpload } from '../../../../network/images'

import XLSX from "xlsx";
import FileSaver from "file-saver";

import today from '../../../../components/mixins/today'
export default {
  mixins: [today],
  props: {
    limit: {
      type: Number,
      default: 20
    },
    currentPage: {
      type: Number,
      default: 1
    },
    deleted: {
      type: Boolean,
      default: true
    },
    searchParams: {
      type: Object,
      default: {}
    },
    exportExl: {
      type: Boolean,
      default: false
    },
    accountBookList: {
      type: Array,
      default: []
    }
  },
  data(){
    return {
      today: this.searchDate(),
      isToday: false,
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      scroll: '',
      receiptsNumber: '',
      accountBook: '',
      date: this.getNowTime(),
      enteringTime: null,
      subject: '',
      subjectList: [],
      subjectInfo: '',
      debtor: '',
      creditor: '',
      summary: '',
      gjData: [],
      checkImg: false,
      uploadImg: 'none',
      imageUrl: '',
      id: '',

      // 上传图片组件数据
      dialogImageUrl: '',
      dialogVisible: false,
      disabledUpList: false,
      largeImg: false,

      // 上传的图片
      imgList: [],
      originalData: {},

      // 当前图片
      imgurl: '',
      // 已有图片
      srcList: [],
      imgPointer: 0,
      uploadLimit: 4,
      imgItemIndex: -1,
      imgItemIndex1: -1
    }
  },
  watch:{
    dataLen(a,b){
      this.$emit('dataLenChange',a)
      this.pagesNum = Math.ceil( this.dataLen / this.limit)
    },
    pagesNum(a,b){
      this.$emit('pagesNumChange',a)
    },
    limit(a,b){
      this._getAccount({limit: this.limit,page: this.currentPage})
    },
    currentPage(a,b){
      this._getAccount({limit: this.limit,page: this.currentPage})
    },
    deleted(a,b){
      this._getAccount({limit: this.limit,page: this.currentPage})
    },
    searchParams(a,b){
      // if (a !== {}) {
      //   // console.log(a)
      //   a.limit = this.limit
      //   a.page = this.currentPage
      //   this.$emit('searchOver')
      // }
      this._getAccount()
    },
    gjData(a,b){
      // 表格得到数据后滚动到最底部
      let box = this.$refs.tableList.bodyWrapper
      this.$nextTick(() => {
        box.scrollTop = box.scrollHeight
      })
    },
    exportExl(a,b){
      if (a) {
        this.exportExcel()
      }
    },
    receiptsNumber(a,b){
      this.receiptsNumber = a.toUpperCase().trim()
    }
  },
  methods: {
    // 上传图片
    upLoad(e){
      if (this.imgList.length + this.srcList.length > 3) {
        this.$message.info('最多上传4张图片')
        return
      }
      const file = document.getElementById('file')
      if (!file.files[0]) return
      let formdata = new FormData()
      formdata.append('file', file.files[0])
      formdata.append('data', this.id)
      currentAccountDoUpload(formdata).then(res => {
        if (res.data.code == 200) {
          this.imgList.push(res.data.data.path)
        }
      })
    },
    queryAccountList(queryString, cb){
      cb(this.accountBookList)
    },
    // 输入框按回车失去焦点
    inputEnter(e){
      let f = document.getElementsByClassName("el-popper")
      f.forEach(f => {
        f.style.display = 'none'
      })
    },
    // 检查金额输入是否数字
    checkType(a,b){
      // console.log(a)
      if (a == '') {
        this[b] = 0
        // console.log(this[b])
      }
      if (isNaN(Number(a))) {
        this.$message({
            message: '借方、贷方只允许输入数字',
            type: 'error'
          })
        return false
      }
      return true
    },
    rowClick(e){
      this.srcList = []
      this.$emit('selectAccount', e.id)
      this.id = e.id
      this.receiptsNumber = e.receiptsNumber
      this.accountBook = e.accountBook
      this.date = e.date + ' 00:00:00'
      this.subject = e.subject
      this.subjectInfo = e.subjectInfo
      this.debtor = e.debtor
      this.creditor = e.creditor
      this.summary = e.summary
      this.originalData = e
      // console.log(e.enteringTime)
      if (this.today == (e.enteringTime).trim()) { //有空格 不相等 去掉空格
        this.isToday = true
      } else {
        this.isToday = false
      }
      this.$emit('isToday', this.isToday)
    },
    saveNewAccount(){
      if (!this.accountBook) {
        this.$message({
            message: '账本不能为空',
            type: 'error'
          })
        return
      }
      if (!this.subject) {
        this.$message({
            message: '科目不能为空',
            type: 'error'
          })
        return
      }
      if (!this.checkType(this.debtor, 'debtor') || !this.checkType(this.creditor, 'creditor')) return
      this.enteringTime = this.getNowTime()
      console.log(this.checkSame())
      if (this.checkSame()) {
        // return
        let that = this
        this.$confirm('存在相同数据, 是否继续添加', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.add()
        }).catch(() => {
          that.$message.info("已取消")
        });
      } else {
        this.add()
      }
    },
    add(){
      let params = {
        receiptsNumber: this.receiptsNumber,
        accountBook: this.accountBook,
        date: this.date,
        subject: this.subject,
        subjectInfo: this.subjectInfo,
        debtor: this.debtor,
        creditor: this.creditor,
        summary: this.summary,
        enteringTime: this.enteringTime
      }
      addAccount(params).then(res => {
        // console.log(res)
        if (res.data.code == 200) {
          if (this.imgList.length) {
            let currentAccountId = res.data.data
            
            let d = []
            this.imgList.forEach(e => {
              d.push({
                currentAccountId,
                imageUrl: e
              })
            })
            
            addImage(JSON.stringify(d)).then(res => {
              // console.log(res)
              this.imgList = []
            })
          }
          
          this.dataLen++
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this._getAccount({limit: this.limit,page: this.pagesNum})
          if (this.accountBookList.length) {
            this.accountBookList.push({value:this.accountBook})
          } else {
            let exist = 0
            for (const i of this.accountBookList) {
              if (i.value == this.accountBook) {
                exist = 1
                break
              }
              exist = 0
            }
            if(!exist) this.accountBookList.push({value:this.accountBook})
          }
          this.$emit('changeAccountBook',this.accountBookList)
        } else {
          this.$message.error('添加失败')
        }
      })
      // console.log(params)
    },
    checkSame(){
      if (this.originalData.id) {
        const p = ['receiptsNumber', 'accountBook', 'subject', 'subjectInfo', 'debtor', 'creditor', 'summary']
        for (const i of p) {
          if (this.originalData[i] == this[i]) {
            return true
          }
        }
        if (this.originalData.date == this.date.splice(0,10)) {
          return true
        }
        return false
      } else {
        return false
      }
    },
    modification(){
      if (!this.id) return
      this.enteringTime = this.getNowTime()
      this.originalData.receiptsNumber = this.receiptsNumber
      this.originalData.accountBook = this.accountBook
      this.originalData.date = this.date
      this.originalData.subject = this.subject
      this.originalData.subjectInfo = this.subjectInfo
      this.originalData.summary = this.summary
      this.originalData.debtor = this.debtor - this.originalData.debtor
      this.originalData.creditor = this.creditor - this.originalData.creditor
      this.originalData.enteringTime = this.enteringTime
      
      updateAccount(this.originalData).then(res => {
        // console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error('修改失败')
        }
        this._getAccount({limit: this.limit,page: this.pagesNum})
      })
    },
    check(e){
      // console.log(e)
      getImage({id:e.id}).then(res => {
        // console.log(res)
        if (res.data.data.length) {
          this.imgurl = res.data.data[0]
          this.srcList = res.data.data
          this.imgPointer = 0
          this.checkImg = true
          document.getElementById("imgBox").style.left = '50%'
          document.getElementById("imgBox").style.top = '50%'
        } else {
          this.checkImg = false
          this.$message('暂无图片')
        }
      })
    },
    // 上传图片
    showUpload(){
      if (!this.id) {
        this.$message.info('请选择要上传图片的数据')
        return
      }
      this.uploadImg = 'block'
      getImage({id:this.id}).then(res => {
        // console.log(res)
        if (res.data.data.length) {
          this.imgurl = res.data.data[0]
          this.srcList = res.data.data
          this.uploadLimit = 4 - res.data.data.length
        }
      })
    },
    // 取消保存图片
    cancelUpload(){
      this.uploadImg = 'none'
      this.imgList.forEach(e => {
        deleteImage({url:e})
      })
      this.imgList = []
    },
    // 保存上传的图片
    submitUpload() {
      if (this.id && this.imgList.length) {
        let d = []
        this.imgList.forEach(e => {
          d.push({
            currentAccountId: this.id,
            imageUrl: e
          })
        })
        
        addImage(JSON.stringify(d)).then(res => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message.error('添加失败')
          }
        })
        
        this.uploadImg = 'none'
        this.imgList = []
        this.srcList = []
      } else {
        this.cancelUpload()
      }
    },

    // 图片删除
    handleRemove(i) {
      // console.log(i)
      let url = this.imgList[i]
      deleteImage({url}).then(res => {
        if (res.data.code == 200) {
          this.imgList.splice(i, 1)
          this.$forceUpdate()
          // console.log(this.imgList)
        }
      })
    },
    // 预览图片
      // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 超出数量限制
    exceed(f){
      this.$message({
        message: '最多上传四张图片',
        type: 'error'
      })
    },
    uploadSuccess(e){
      // console.log(e)
      if (e.code == 200) {
        this.imgList.push(e.data.path)
      }
    },
    uploadError(e){
      // console.log(e)
      this.$message.error('上传失败')
    },
    imgItemClick(i){
      // console.log(i)
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        changeImage(JSON.stringify([{
          currentAccountId: this.id,
          imageUrl: null,
          oldImageUrl: this.srcList[i]
        }])).then(r => {
          // console.log(r)
          if (r.data.code == 200) {
            deleteImage({url:this.srcList[i]}).then(res => {
              // console.log(res)
              if (res.data.code == 200) {
                this.srcList.splice(i,1)
                this.uploadLimit++
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }
            })
          }
        })
        
      })
    },

    _getAccount(){
      let p = this.searchParams
      p.limit = this.limit
      p.page = this.currentPage
      getAccount(p).then(res => {
        // console.log(res)
        this.gjData = res.data.data || []
        if (this.gjData.length == 0 && this.currentPage > 1) {
          this.currentPage--
          this._getArtNo({limit: this.limit,page: this.currentPage})
        }
        this.dataLen = res.data.total
      })
      this.debtor = ''
      this.creditor = ''
      this.summary = ''
    },

    // 导出Excel
    exportExcel() {
      if (!this.gjData.length) return
      let p = this.searchParams
      p.limit = 999999
      p.page = 1
      getAccount(p).then(res => {
        let list = []
        res.data.data.forEach(e => {
          list.push({
            日期: e.date,
            单号: e.receiptsNumber,
            科目: e.subject,
            账本: e.accountBook,
            科目明细: e.subjectInfo,
            '借方(收入)': e.debtor,
            '贷方(支出)': e.creditor,
            余额: e.balance,
            摘要: e.summary
          })
        });
        let wb = {
          SheetNames: ['sheet1'],
          Sheets: {
            sheet1 : XLSX.utils.json_to_sheet(list)
          }
        }
        // console.log(wb)
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
            "现金流水明细.xlsx"
          );
          this.$emit("exportFinish")
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      })
      
    },

    nextImg(){
      let len = this.srcList.length
      if (len > 1) {
        if (this.imgPointer < len-1) {
          this.imgurl = this.srcList[++this.imgPointer]
        } else {
          this.imgurl = this.srcList[0]
          this.imgPointer = 0
        }
      }
    },
    previousImg(){
      let len = this.srcList.length
      if (this.imgPointer > 0) {
        this.imgurl = this.srcList[--this.imgPointer]
      } else {
        this.imgurl = this.srcList[this.imgPointer = len - 1]
      }
    },
    enlargement(i){
      // console.log(i)
      this.largeImg = true
      this.imgPointer = i
      this.imgurl = this.srcList[i]
    }
  },
  created(){
    this._getAccount({limit: this.limit,page: this.pagesNum})
    getSubject().then(res => {
      let list = res.data.data
      list.forEach((item,i) => {
        this.subjectList.push({value: '', lable: ''})
        this.subjectList[i].value = item.name
        this.subjectList[i].lable = item.name
      })
      // console.log(this.subjectList)
    })
  },
  mounted(){
    // ctrl V 粘贴图片
    document.addEventListener('paste', event => {
      // console.log('监听到了paste事件')
      // console.log(event)
      let items = (event.clipboardData || window.clipboardData).items
      // console.log(items)
      let file = null;
      if (items && items.length) {
        // 搜索剪切板items
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.indexOf('image') !== -1) {
            // console.log('has img')
            file = items[i].getAsFile()
            break
          }
        }
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      let reader = new FileReader()
      reader.onload = function(event) {
        preview.innerHTML = '<img src="' + event.target.result + '" class="upload-image">'
      }
      reader.readAsDataURL(file);
      // 如果不需要预览，上面这段可以忽略

      // if (event.clipboardData || event.originalEvent) {
      //   let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
      //   console.log(clipboardData)
      //   if(clipboardData.items){
      //     let blob;
      //     for (let i = 0; i < clipboardData.items.length; i++) {
      //       if (clipboardData.items[i].type.indexOf("image") !== -1) {
      //         blob = clipboardData.items[i].getAsFile();
      //       }
      //     }
      //     let render = new FileReader();
      //     render.onload = function (evt) {
      //       //输出base64编码
      //       let base64 = evt.target.result;
      //       document.getElementById('img').setAttribute('src',base64);
      //     }
      //     render.readAsDataURL(blob);
      //   }
      // }
    })
    imgBoxTop.onmousedown = function(event){
      let imgBox=document.getElementById("imgBox")
      let rex=event.clientX - imgBox.offsetLeft
      let rey=event.clientY - imgBox.offsetTop
      document.onmousemove = e=>{ 
        let xX = 0
        let yY = 0
        xX=e.clientX
        yY=e.clientY
        imgBox.style.left = (xX-rex) + "px"
        imgBox.style.top = (yY-rey) + "px"
      }
    }
    document.onmouseup=()=>{
      document.onmousemove=null
    }
  }
}
</script>

<style scoped>
  .gj_add{
    background-color: #f4f4f4;
    padding: 1vh 0;
    white-space: nowrap;
    margin-bottom: 1.5vh;
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
  .upload{
    position: fixed;
    top: 5%;
    left: 50%;
    max-height: 80vh;
    transform: translateX(-50%);
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99;
    overflow-y: auto;
  }
  .ui-top{
    background-color: #f2f2f2;
    height: 50px;
    margin-bottom: 15px;
  }
  .ui-top p {
    float: left;
    margin: 15px 0 0 20px;
    font-weight: bolder;
  }
  .ui-top i {
    width: 50px;
    float: right;
    text-align: center;
    line-height: 50px;
  }
  .ui-content{
    width: auto;
    margin-bottom: 5px;
    padding: 0 20px;
    display: flex;
  }
  .upload_1, .upload_2{
    width: 480px;
    height: 280px;
    border: solid 1px #ccc;
    border-radius: 10px;
    margin: 0 10px;
  }
  .upload_1{
    background: rgba(0, 0, 0, .5);
  }
  .upload_1 i{
    font-size: 40px;
    color: white;
    position: relative;
  }
  .upload_1 .el-icon-delete{
    top: -219px;
    left: 270px;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .upload_2 {
    overflow: hidden;
  }
  .upload .operation{
    float: right;
    margin: 0 20px 15px 0;
    white-space: nowrap;
  }

  .upload .upload-image{
    min-height: 150px;
    width: 400px;
  }

  #imgBox{ 
    position: absolute;
    height: auto;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
  }
  .imgTop{
    background-color: #f4f4f4;
    height: 30px;
    padding-left: 10px;
  }
  .imgTop i{
    float: right;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  #imgBox img {
    max-width: 200px;
  }
  .uploadImg {
    width: 200px;
    height: 200px;
  }

  #large {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgb(0,0,0,0.5);
    text-align: center;
  }
  #large span {
    font-size: 50px;
    color: white;
    font-weight: bold;
    border: solid white;
    margin: 0 1vw;
    border-radius: 30px;
    cursor: pointer;
  }
  #large img {
    max-width: 80vw;
    max-height: 80vh;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  #large>div {
    position: absolute;
    /* left: 50%;
    margin-left: -50px;
    bottom: 5vh; */
    top: 5vh;
    right: 5vw;
  }
  .imgItem {
    display: inline-block;
    position: relative;
    margin-right: 10px;
  }
  .imgMask {
    position: absolute;
    width: 100%;
    height: 97%;
    background-color: black;
    opacity: 50%;
    text-align: center;
  }
  .imgMask i {
    color: white;
    font-weight: bold;
    font-size: 30px;
    position: relative;
    top: 50%;
    cursor: pointer;
  }
  /* .imgItem:hover::after {
    display: inline-block;
    content: "删除";
    height: 100%;
    width: 100%;
    background-color: blueviolet;
    opacity: 50%;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
  } */
  .up {
    height: 200px;
    width: 200px;
    line-height: 200px;
    border: 2px dashed #d7dae2;
    border-radius: 20px;
    position: relative;
    color: #606266;
    text-align: center;
  }
  .up:hover{
    color: #017AFF;
    border-color: rgb(179, 215, 255);
    background-color: rgb(230, 242, 255);
  }
  #file {
    opacity: 0;
    position: absolute;
    left: 0px;
    top: 0;
    overflow: hidden;
    cursor: pointer;
    height: 200px;
    width: 200px;
  }
</style>

<style>
  .gjDetail .gj_add .el-input{
    width: 8vw;
    margin-right: 0.5vw;
  }
  .gjDetail .el-autocomplete .el-input{
    width: 6vw;
  }
  .gjDetail .avatar-uploader .el-upload {
    width: 478px;
    height: 278px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .gjDetail .el-upload--picture-card{
    height: 200px;
    width: 200px;
  }
  .gjDetail .el-upload-list__item{
    height: 200px;
    width: 350px;
  }
  .gjDetail .ui-content .el-icon-plus{
    font-size: 70px;
    line-height: 200px;
  }
  .gjDetail .ui-content li  i{
    font-size: 40px;
    line-height: 200px;
  }
  .gjDetail .ui-content .el-icon-zoom-in{
    margin-right: 50px;
  }

  .gjDetail .ui-content .el-dialog__wrapper{
    overflow: visible;
  }

  .gjDetail .ui-content .el-dialog{
    width: 36vw;
    float: left;
    top: -90%;
    left: 50%;
    transform: translateX(-50%);
  }

  .gjDetail .el-icon-upload-success{
    font-size: 20px!important;
    line-height: 10px!important;
  }
  .gjDetail .el-image-viewer__wrapper{
    width: 70vw;
    height: 75vh;
    left: -120%;
    top: -100%;
    position: fixed;
  }
</style>